<template>
  <div class="GykjMap-drainPipe">
    <div class="GykjMap-drainPipe-table">
      <table border class="table">
        <tbody>
          <tr>
            <td>管线编码</td>
            <td>{{fliterData('pipe_line_no')}}</td>
            <td>管线名称</td>
            <td>{{fliterData('pipe_line_name')}}</td>
          </tr>
          <tr>
            <td>管线类型</td>
            <td>{{fliterData('pipe_line_type')}}</td>
            <td>图形编号</td>
            <td>{{fliterData('picture_no')}}</td>
          </tr>
          <tr>
            <td>管线长度</td>
            <td>{{fliterData('length')}}</td>
            <td>口径</td>
            <td>{{fliterData('diameter')}}</td>
          </tr>
          <tr>
            <td>材质</td>
            <td>{{fliterData('material_quality')}}</td>
            <td>设施类别</td>
            <td>{{fliterData('category')}}</td>
          </tr>
          <tr>
            <td>所属路段</td>
            <td>{{fliterData('road')}}</td>
            <td>片区</td>
            <td>{{fliterData('district')}}</td>
          </tr>
          <tr>
            <td>街镇</td>
            <td>{{fliterData('town')}}</td>
            <td>业主单位</td>
            <td>{{fliterData('company')}}</td>
          </tr>
          <tr>
            <td>资产编号</td>
            <td>{{fliterData('asset_no')}}</td>
            <td>运行养护单位</td>
            <td>{{fliterData('mainienance')}}</td>
          </tr>
          <tr>
            <td>联系人</td>
            <td>{{fliterData('contacts')}}</td>
            <td>电话</td>
            <td>{{fliterData('phone_no')}}</td>
          </tr>
          <tr>
            <td>说明标签</td>
            <td>{{fliterData('remake')}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {}
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-drainPipe {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 5px;
  .GykjMap-drainPipe-table {
    width: 100%;
    height: 100%;
    .table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        width: 25%;
        padding: 5px;
      }
    }
  }
}
</style>
